var __ws = [
	{
		name: 'Logo',
		template: `
		<div name="Logo" >
			<img class="w100" :src="src" />
	  	</div>`,
		data: function () {
			return {
				src: './static/img/cube_174.png',
			}
		},
	},
	{
		name: 'Login',
		template: `
		<div name="Login" class="br2 bgf pdtb10">
			<form class="flex flc center">
				
				<div class="fm-row flec center marb10 bbx">
					<div class="w70 marr10">
						<div class="w100 justify-all"><span>登录账号</span></div>
					</div>
					<div class="w200"><Input class="w100 ih" v-model="username" placeholder="店员账号或者店主账号" /></div>
				</div>
				<div class="fm-row disn center marb10 bbx">
					<div class="fs12 cr">
						<div class="w100 "><span>店员账号或者店主账号</span></div>
					</div>
				</div>
				<div class="fm-row flec center marb10 bbx">
					<div class="w70 marr10">
						<div class="w100 justify-all"><span>登录密码</span></div>
					</div>
					<div class="w200"><Input class="w100 ih" v-model="password" placeholder="请输入密码" /></div>
				</div>
				<div v-if="verify" class="fm-row flec center marb10 bbx">
					<div class="w70 marr10">
						<div class="w100 justify-all"><span>验证码</span></div>
					</div>
					<div class="w110 marr10"><Input class="w100 ih" v-model="code" @enter="doLogin" /></div>
					<div class="w80 bg01 ih bbx bd1e br2 btn" @click="getCode()">
						<img class="w100" :src="code_img" @error="imgError()" />
					</div>
				</div>
				<div class="h30"></div>
				<div class="fm-row flec center marb10 bbx w100 pd010 bbx">
					<div class="btn w290 center subh br2 bbx bgc-warning cfff" @click="doLogin">
						<span v-if="waiting"><i class="fa fa-spinner fa-pulse fa-fw margin-bottom"></i></span>
						<span>登录</span>
					</div>
				</div>
			</form>
	  	</div>`,
		data: function () {
			return {
				waiting: false,
				verify: true,
				username: '13458421057',
				password: '123456',
				code_key: '',
				code_img: '',
				code: '',
			}
		},
		created(){
			let v = this;
			v.getCode();
		},
		methods:{
			imgError(){},
			getCode() {
				let v = this;
				let uri = __api.code;//'http://192.168.0.123:9005/api/common/get_code'
				__post({url:uri,method:'GET'}).then(r => {
					console.log('get_code',r);
					if (r.code == 200) {
						v.code_img = r.data.code_img;
						v.code_key = r.data.code_key;
						
					
					} else {
						__message(r.msg,50000,'cr')
						setTimeout(function () {v.waiting = false;},1000);
					}
					
				})
			},
			doLogin() {
				let v = this;
				if (v.waiting) return;
				let data = {
					'phone':v.username,
					'password':v.password,
					'code_key':v.code_key,
					'code':v.code,
				}
				v.waiting = true;
				__post({url:__api.login, data:data}).then(r => {
					console.log('login',r);
					if (r.code == 200) {
						let d = r.data;
						localStorage._user = JSON.stringify(r.data);
						__ls('btoken',r.data.btoken)
						__ls('avatar',r.data.avatar);
						__ls('busername',r.data.username);
						__ls('worker_id',r.data.worker_id);
						setTimeout(function () {
							v.waiting = false;
							v.$router.push('/nav');
						},1000);
					
					} else {
						__message(r.msg,50000,'cr')
						setTimeout(function () {v.waiting = false;},1000);
					}
					
				})
			},
		}
	},
	{
		name: 'BodyPicker',
		template: `
		<div name="BodyPicker" class="wh100"  >
			<div class="wh100" :id="mid"></div>
	  	</div>`,
		data: function () {
			return {
				waiting: false,
				ctx: {},
				mid:'',
				objects:[],
				selectedObject:{},
			}
		},
		created () {
			let v = this;
			window.BodyPicker = this;
			v.mid = 'BodyPicker-' + __getid() + '-' + Math.floor(Math.random() * 1000);
		},
		mounted () {
			let v = this;
			let ctx = document.getElementById(v.mid);
			// console.log(ctx)
			v.ctx = ctx;
			if (ctx) {
				v.init()
			}
		},
		methods:{
			doPicked(s) {
				//console.log('doPicked name',s);
				let v = this;
				v.$emit('selected',s)
			},
			setIndex (i) {
				let v = this;
				if (i.k) {
					//console.log('setIndex',i);
					//console.log('objects',v.objects);
					for (let k in v.objects) {
						
						v.objects[k].material.opacity = 0.01;
						v.objects[k].material.color.set( '#69f' );
						if (v.objects[k].name == i.i) {
							v.objects[k].material.color.set( '#f1f' );
							v.objects[k].material.opacity = 0.3;
						}
					}
				}
			},
			init () {
				let v = this;
				let scene, renderer, camera, stats;
				let model, skeleton, mixer, clock;
				let group, x = 0, y = 0;
				const defaultOpacity = 0.01
				
				const crossFadeControls = [];
				let currentBaseAction = 'idle';
				const allActions = [];
				const baseActions = {
					idle: { weight: 1 },
					walk: { weight: 0 },
					run: { weight: 0 }
				};
				const additiveActions = {
					sneak_pose: { weight: 0 },
					sad_pose: { weight: 0 },
					agree: { weight: 0 },
					headShake: { weight: 0 }
				};
				let panelSettings, numAnimations;

				init();
				function init() {
					const container = document.getElementById( v.mid );
					clock = new THREE.Clock();
					scene = new THREE.Scene();
					scene.background = new THREE.Color( 0xa0a0a0 );
					scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
	
					const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
					hemiLight.position.set( 0, 20, 0 );
					scene.add( hemiLight );
	
					const dirLight = new THREE.DirectionalLight( 0xffffff );
					dirLight.position.set( 3, 10, 10 );
					dirLight.castShadow = true;
					dirLight.shadow.camera.top = 2;
					dirLight.shadow.camera.bottom = - 2;
					dirLight.shadow.camera.left = - 2;
					dirLight.shadow.camera.right = 2;
					dirLight.shadow.camera.near = 0.1;
					dirLight.shadow.camera.far = 40;
					scene.add( dirLight );
					// ground
					const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
					mesh.rotation.x = - Math.PI / 2;
					mesh.receiveShadow = true;
					scene.add( mesh );
					//console.log(_object3DId)
					const loader = new GLTFLoader();
					loader.load( './static/img/Xbot.glb', function ( gltf ) {
						model = gltf.scene;
						scene.add( model );
						model.traverse( function ( object ) {
							if ( object.isMesh ) {
								// console.log('object blendSrcAlpha',object.material)
								object.castShadow = true;
								
								object.material.blending = THREE.CustomBlending;
								object.material.blendEquation = THREE.AddEquation
								object.material.blendEquationAlpha = THREE.AddEquation
								object.material.blendSrcAlpha = 0.8;
								object.material.blendDstAlpha = 0.8;
								
								// object.material.blendSrc = THREE.SrcColorFactor
								// object.material.blendDst = THREE.DstColorFactor
								object.material.blendSrc = THREE.SrcAlphaFactor
								//object.material.blendSrc = THREE.SrcColorFactor
								object.material.blendDst = THREE.OneMinusSrcAlphaFactor
								//object.material.blendDst = THREE.DstColorFactor
								//object.material.blendDst = THREE.OneMinusSrcColorFactor
								//object.material.blendDst = THREE.OneMinusDstAlphaFactor
								// object.material.blendDst = THREE.OneMinusDstColorFactor
								//OneMinusSrcColorFactor OneMinusDstColorFactor
								//object.material.alphaTest = 0.5;
								//side: THREE.DoubleSide
								//THREE.CustomBlending
								//alphaTest
							}
							
						} );
						// console.log('model',model)
						// console.log('model gltf',model)
						
						skeleton = new THREE.SkeletonHelper( model );
						skeleton.visible = false;
						// ysh
						// scene.add( skeleton );
						const animations = gltf.animations;
						mixer = new THREE.AnimationMixer( model );
						numAnimations = animations.length;
						for ( let i = 0; i !== numAnimations; ++ i ) {
							let clip = animations[ i ];
							const name = clip.name;
							// console.log('animations',animations,name)
							if ( baseActions[ name ] ) {
								const action = mixer.clipAction( clip );
								activateAction( action );
								baseActions[ name ].action = action;
								allActions.push( action );
							} else if ( additiveActions[ name ] ) {
								THREE.AnimationUtils.makeClipAdditive( clip );
								if ( clip.name.endsWith( '_pose' ) ) {
									clip = THREE.AnimationUtils.subclip( clip, clip.name, 2, 3, 30 );
								}
								const action = mixer.clipAction( clip );
								activateAction( action );
								additiveActions[ name ].action = action;
								allActions.push( action );
							}
						}
						animate();
						defaultAction();
						// console.log('scene',scene);
					} );
	
					renderer = new THREE.WebGLRenderer( { antialias: true } );
					renderer.setPixelRatio( window.devicePixelRatio );
					renderer.setSize( window.innerWidth, window.innerHeight );
					renderer.outputEncoding = THREE.sRGBEncoding;
					renderer.shadowMap.enabled = true;
					container.appendChild( renderer.domElement );
					camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.0001, 10 );
					camera.position.set( 0 , 2, 3 );
					const controls = new OrbitControls( camera, renderer.domElement );
					controls.enablePan = false;
					controls.enableZoom = true;
					// controls.enableZoom = false;
					controls.target.set( 0, 1, 0 );
					controls.update();
					window.addEventListener( 'resize', onWindowResize, false );
					window.__camera = camera;
					window.__controls = controls;
					//reset
					addBodyParts();
				}
				
				
				function addBodyParts(){
					group = new THREE.Group();
					let l = [
						//{k:'center',  l:'中心',v:'0',p:[0,1,-0.002],  r:[0,0,0], s:[1,0.01,1]},
						{k:'head',    l:'头部',  v:'1',p:[0,1.68,0.01], r:[0.2,0,0], s:[0.23,0.26,0.265]},
						{k:'neck',    l:'脖子',  v:'2',p:[0,1.53,-0.01],r:[0,0,0], s:[0.11,0.08,0.115]},
						{k:'shoulder',l:'肩部',  v:'3',p:[0,1.49,-0.04],r:[0,0,0], s:[0.385,0.06,0.19]},
						{k:'chest',   l:'胸部',  v:'4',p:[0,1.37, 0.01],r:[0,0,0], s:[0.35,0.19,0.30]},
						{k:'abdomen', l:'腹部',  v:'5',p:[0,1.15,0.015],r:[0,0,0], s:[0.35,0.25,0.28]},
						{k:'hips',    l:'臀部',  v:'6',p:[0,0.95,0.000],r:[0,0,0], s:[0.42,0.15,0.30]},
						{k:'thigh_l', l:'大腿左', v:'7',p:[0.11,0.75,0.012],r:[0,0,0],  s:[0.21,0.25,0.23]},
						{k:'thigh_r', l:'大腿右', v:'8',p:[-0.11,0.75,0.012],r:[0,0,0], s:[0.21,0.25,0.23]},
						{k:'knee_l',  l:'左膝', v:'9',p:[ 0.085,0.54,0.009],r:[0,0,0], s:[0.15,0.18,0.19]},
						{k:'knee_r',  l:'右膝', v:'10',p:[-0.085,0.54,0.009],r:[0,0,0], s:[0.15,0.18,0.19]},
						{k:'shank_l', l:'左胫', v:'11',p:[ 0.081,0.30,0.009],r:[0,0,0], s:[0.15,0.29,0.19]},
						{k:'shank_r', l:'右胫', v:'12',p:[-0.081,0.30,0.009],r:[0,0,0], s:[0.15,0.29,0.19]},
						{k:'ankle_l', l:'左踝', v:'13',p:[ 0.085,0.098,-0.011],r:[0,0,0], s:[0.119,0.10,0.12]},
						{k:'ankle_r', l:'右踝', v:'3',p:[-0.085,0.098,-0.011],r:[0,0,0], s:[0.119,0.10,0.12]},
						{k:'footer_l',l:'左脚', v:'3',p:[ 0.086,0.027, 0.049],r:[0,0,0], s:[0.12,0.08,0.27]},
						{k:'footer_r',l:'右脚', v:'3',p:[-0.086,0.027, 0.049],r:[0,0,0], s:[0.12,0.08,0.27]},
						{k:'arm_l',   l:'左膀', v:'3',p:[ 0.308,1.430,-0.049],r:[0,0,0], s:[0.28,0.119,0.16]},
						{k:'arm_r',   l:'右膀', v:'3',p:[-0.308,1.430,-0.049],r:[0,0,0], s:[0.28,0.119,0.16]},
						{k:'limb_l',  l:'左腕', v:'3',p:[ 0.565,1.438,-0.049],r:[0,0,0], s:[0.24,0.119,0.16]},
						{k:'limb_r',  l:'右腕', v:'3',p:[-0.565,1.438,-0.049],r:[0,0,0], s:[0.24,0.119,0.16]},
						{k:'hand_l',  l:'左手', v:'3',p:[ 0.805,1.425,-0.040],r:[0,0,0], s:[0.198,0.100,0.16]},
						{k:'hand_r',  l:'右手', v:'3',p:[-0.805,1.425,-0.040],r:[0,0,0], s:[0.198,0.100,0.16]},
					]
					//shank
					let color = { color: Math.random() * 0xffffff };
					const geometry = new THREE.BoxBufferGeometry( 1, 1, 1 );
					
					// new THREE.MeshLambertMaterial( color )
					for ( let i = 0; i < l.length; i ++ ) {
						const material = new THREE.MeshBasicMaterial({ 
						    transparent: true, 
						    opacity: defaultOpacity, 
						    // side: THREE.BackSide, 
						    //vertexColors: color, 
						    color: color,
						});
						// material.alphaTest = 0.1;
						const object = new THREE.Mesh( geometry,  material);
						object.position.x = l[i].p[0];
						object.position.y = l[i].p[1];
						object.position.z = l[i].p[2];
						object.rotation.x = l[i].r[0];
						object.rotation.y = l[i].r[1];
						object.rotation.z = l[i].r[2];
						object.scale.x    = l[i].s[0];
						object.scale.y    = l[i].s[1];
						object.scale.z    = l[i].s[2];
						object.name       = '' + i;
						//scene.add( object );
						group.add( object );
						v.objects.push(object);
					}
					
					scene.add( group );
					
					// console.log('addBodyParts group',group.children);
				}
				let selectedObject = null;
				function onDocumentMouseDown( event ) {
					// event.preventDefault();
					
					
					x = event.layerX ||　event.clientX;
					y = event.layerX ||　event.clientY;
					if (event.touches && event.touches[0]) {
						x = event.touches[0].clientX;
						y = event.touches[0].clientY;
					}
					y = y - 41;
					const intersects = getIntersects( x,y );
					// console.log('getIntersects',x, y,intersects)
					
					if ( selectedObject && (intersects.length > 0)) {
						// console.log('material',selectedObject.material)
						selectedObject.material.opacity = defaultOpacity;
						selectedObject.material.color.set( '#69f' );
						selectedObject = null;
					}
					
					if ( intersects.length > 0 ) {
						const res = intersects.filter( function ( res ) {
							return res && res.object;
		
						} )[ 0 ];
						if ( res && res.object ) {
							
							selectedObject = res.object;
							selectedObject.material.color.set( '#f1f' );
							selectedObject.material.opacity = 0.3;
							// console.log('pick object',selectedObject)
							window.BodyPicker.doPicked(selectedObject.name);
						}
					}
				}
				
				const raycaster = new THREE.Raycaster();
				const mouseVector = new THREE.Vector3();
				function getIntersects( x, y ) {
					x = ( x / window.innerWidth ) * 2 - 1;
					y = - ( y / window.innerHeight ) * 2 + 1;
					mouseVector.set( x, y, 0.5 );
					raycaster.setFromCamera( mouseVector, camera );
					
					return raycaster.intersectObject( group, true ); // scene.children[3]
					return raycaster.intersectObject( scene, true );
				}
				
				v.ctx.addEventListener( 'mousedown', onDocumentMouseDown, false );
				// window.addEventListener( 'mousemove', onDocumentMouseDown, false );
				v.ctx.addEventListener( 'touchstart', onDocumentMouseDown, false );
				function resetCamera () {
					__camera.position.set( - 1, 2, 3 );
					__controls.target.set( 0, 1, 0 );
					__controls.update();
				}
				function defaultAction () {
					const currentSettings = baseActions[ currentBaseAction ];
					const currentAction = currentSettings ? currentSettings.action : null;
					const action = null;
					prepareCrossFade( currentAction, action, 0.35 );
					// console.log('prepareCrossFade',currentAction,action)
				};
				window.resetCamera = resetCamera;
				function activateAction( action ) {
					const clip = action.getClip();
					const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
					setWeight( action, settings.weight );
					action.play();
				}
				function modifyTimeScale( speed ) {
					mixer.timeScale = speed;
				}
				function prepareCrossFade( startAction, endAction, duration ) {
					if ( currentBaseAction === 'idle' || ! startAction || ! endAction ) {
						executeCrossFade( startAction, endAction, duration );
					} else {
						synchronizeCrossFade( startAction, endAction, duration );
					}
					if ( endAction ) {
						const clip = endAction.getClip();
						currentBaseAction = clip.name;
					} else {
						currentBaseAction = 'None';
					}
					crossFadeControls.forEach( function ( control ) {
						const name = control.property;
						if ( name === currentBaseAction ) {
							control.setActive();
						} else {
							control.setInactive();
						}
					} );
				}
				function synchronizeCrossFade( startAction, endAction, duration ) {
					mixer.addEventListener( 'loop', onLoopFinished );
					function onLoopFinished( event ) {
						if ( event.action === startAction ) {
							mixer.removeEventListener( 'loop', onLoopFinished );
							executeCrossFade( startAction, endAction, duration );
						}
					}
				}
				function executeCrossFade( startAction, endAction, duration ) {
					console.log(startAction, endAction, duration )
					if ( endAction ) {
						setWeight( endAction, 1 );
						endAction.time = 0;
						if ( startAction ) {
							startAction.crossFadeTo( endAction, duration, true );
						} else {
							endAction.fadeIn( duration );
						}
					} else {
						startAction.fadeOut( duration );
					}
				}
				function setWeight( action, weight ) {
					action.enabled = true;
					action.setEffectiveTimeScale( 1 );
					action.setEffectiveWeight( weight );
				}
				function onWindowResize() {
					camera.aspect = window.innerWidth / window.innerHeight;
					camera.updateProjectionMatrix();
					renderer.setSize( window.innerWidth, window.innerHeight );
				}
				function animate() {
					requestAnimationFrame( animate );
					for ( let i = 0; i !== numAnimations; ++ i ) {
						const action = allActions[ i ];
						const clip = action.getClip();
						const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
						settings.weight = action.getEffectiveWeight();
					}
					const mixerUpdateDelta = clock.getDelta();
					mixer.update( mixerUpdateDelta );
					renderer.render( scene, camera );
				}
			}
		}
	},
	{
		name: 'BodyPartPicker',
		template: `
		<div name="BodyPartPicker" class="wh100 pr"  >
			<div class="wh100" :id="mid"></div>
			<div class="pa r0 t0 w60 h40 flec z3">
				<div>
					<select v-model="gender" class="bdn bbx w50 pd05 marr10 h25 flec" @change="switchGltf()">
						<option value="1">男</option>
						<option value="0">女</option>
					</select>
				</div>
			</div>
			<div class="pa t0 w40 h100 center flec z2" style="right:10px">
				<div class="w20 h200 pr bgf05 bbx br10 pdtb1 "  @touchstart="touchstart" @touchmove="touchstart" @mousedown="touchstart">
					<div class="wh20 flec center pa l0" :style="{top: top + 'px',}" >
						<div class="wh20 bbx br15 bgcb btn"></div>
					</div>
				</div>
			</div>
	  	</div>`,
	  	props: {
	  		panel:{type: Boolean, default: false},
	  	},
		data: function () {
			return {
				waiting: false,
				ctx: {},
				mid:'',
				objects:[],
				selectedObject:{},
				scale: 5,
				gender: 1,
				scene:'', 
				renderer:'',
				camera: '',
				controls: '',
				top: 90,
				run: false,
			}
		},
		created () {
			let v = this;
			window.BodyPicker = this;
			v.mid = 'PartPicker-' + __getid() + '-' + Math.floor(Math.random() * 1000);
			window.__iv = this;
		},
		beforeDestroy(){
			let v = this;
			v.run = false;
			console.log('beforeDestroy',v.scene);
			v.clearMesh();
			if (v.scene.dispose) v.scene.dispose();
		},
		destroyed () {
			window.__model = false;
		},
		mounted () {
			let v = this;
			let ctx = document.getElementById(v.mid);
			// console.log(ctx)
			v.ctx = ctx;
			if (ctx) {
				v.init()
			}
		},
		methods:{
			clearMesh(){
				let v = this;
				let s = v.scene;
				console.log('clearMesh',v.objects);
				for (let i = 0; i < v.objects.length; i++) {
					let geo = v.objects[i].geometry;
					let mat = v.objects[i].material;
					if (geo.dispose) geo.dispose(); 
					if (mat.dispose) mat.dispose(); 
					// console.log('dispose',i,geo.dispose,mat.dispose);
				}
			},
			touchstart (e){
				e.preventDefault();
				let v = this;
				if (!e.touches) return;
				let ty = e.touches[0].clientY;
				let bh = document.body.clientHeight;
				let x = (bh - 200) * 0.5;
				let ry = ty - x - 30;
				// console.log('touchstart',ry,x,bh,ty,e);
				if (ry > 179) ry = 179;
				if (ry < 1) ry = 1;
				v.top = ry;
				let cy = (ry - 90)/180 + 0.7;
				if (v.controls) {
					v.controls.target.set( 0, cy, 0 );
					v.controls.update();
				}
			},
			doPicked(s) {
				let v = this;
				v.$emit('selected',s)
			},
			switchGltf(){
				let v = this;
				let s = v.gender == 1 ? './static/img/man_white_body.gltf' : './static/img/woman.gltf';
				console.log('s',s);
				v.clearMesh();
				v.init(s);
			},
			setIndex (i) {
				let v = this;
				let scolor = '#c32502',dcolor="#6699ff";
				if (i.s) {
					// console.log('i.s',i);
					for (let k in v.objects) {
						v.objects[k].material.color.set( dcolor );
						if (v.objects[k].name == i.s) {
							v.objects[k].material.color.set( scolor );
						}
					}
				}
			},
			init (ss) {
				let scolor = '#c32502',dcolor="#6699ff";
				let v = this;
				let model, skeleton, mixer, clock;
				let group, x = 0, y = 0;
				const defaultOpacity = 0.01
				let scene = v.scene;
				let renderer = v.renderer;
				let camera = v.camera;
				let controls = v.controls;
				const crossFadeControls = [];
				let currentBaseAction = 'idle';
				const allActions = [];
				const baseActions = {
					idle: { weight: 1 },
					walk: { weight: 0 },
					run: { weight: 0 }
				};
				const additiveActions = {
					sneak_pose: { weight: 0 },
					sad_pose: { weight: 0 },
					agree: { weight: 0 },
					headShake: { weight: 0 }
				};
				let panelSettings, numAnimations;
				v.objects = [];
				init(ss);
				function init(ss) {
					const container = document.getElementById( v.mid );
					clock = new THREE.Clock();
					console.log('scene',scene);
					if (!scene) {
						scene = new THREE.Scene();
						renderer = new THREE.WebGLRenderer( { antialias: true } );
						camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.0001, 100 );
						controls = new OrbitControls( camera, renderer.domElement );
						v.scene = scene;
						v.renderer = renderer;
						v.camera = camera;
						v.controls = controls;
					}
					
					scene.clear();
					scene.background = new THREE.Color( 0xa0a0a0 );
					scene.fog = new THREE.Fog( 0xa0a0a0, 10, 50 );
	
					const hemiLight = new THREE.HemisphereLight( 0xffffff, 0x444444 );
					hemiLight.position.set( 0, 20, 0 );
					scene.add( hemiLight );
	
					const dirLight = new THREE.DirectionalLight( 0xeeeeee );
					dirLight.position.set( 3, 10, 10 );
					dirLight.castShadow = true;
					dirLight.shadow.camera.top = 2;
					dirLight.shadow.camera.bottom = - 2;
					dirLight.shadow.camera.left = - 2;
					dirLight.shadow.camera.right = 2;
					dirLight.shadow.camera.near = 0.1;
					dirLight.shadow.camera.far = 40;
					scene.add( dirLight );
					const light = new THREE.AmbientLight( 0x808080 ); // soft white light
					// scene.add( light );
					// ground
					const mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 100, 100 ), 
					// new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
					new THREE.MeshPhongMaterial( { color: 0x777777, depthWrite: false } ) );
					mesh.rotation.x = - Math.PI / 2;
					mesh.receiveShadow = true;
					mesh.name = 'plane'
					scene.add( mesh );
					//console.log(_object3DId)
					const loader = new GLTFLoader();
					let obj = './static/img/Xbot.glb';
					obj = './static/img/man_white_body.gltf';
					if (ss) obj = ss;
					console.log('ss',ss);
					// obj ='http://127.0.0.1:8010/tcm/public/demo/static/img/man_white_body.gltf'
					loader.load( obj, function ( gltf ) {
						model = gltf.scene;
						window.__model = model;
						model.scale.set(0.01,0.01,0.01);
						scene.add( model );
						model.traverse( function ( object ) {
							if ( object.isMesh ) {
								// console.log('isMesh gltf',object.material)
								let mat = new THREE.MeshStandardMaterial( { color: dcolor });
								object.material = mat;
								v.objects.push(object);
							}
						} );
						// console.log('model',model)
						console.log('model gltf',ss,obj,model)
						skeleton = new THREE.SkeletonHelper( model );
						skeleton.visible = false;

						// scene.add( skeleton );
						const animations = gltf.animations;
						mixer = new THREE.AnimationMixer( model );
						numAnimations = animations.length;
						for ( let i = 0; i !== numAnimations; ++ i ) {
							let clip = animations[ i ];
							const name = clip.name;
							// console.log('animations',animations,name)
							if ( baseActions[ name ] ) {
								const action = mixer.clipAction( clip );
								activateAction( action );
								baseActions[ name ].action = action;
								allActions.push( action );
							} else if ( additiveActions[ name ] ) {
								THREE.AnimationUtils.makeClipAdditive( clip );
								if ( clip.name.endsWith( '_pose' ) ) {
									clip = THREE.AnimationUtils.subclip( clip, clip.name, 2, 3, 30 );
								}
								const action = mixer.clipAction( clip );
								activateAction( action );
								additiveActions[ name ].action = action;
								allActions.push( action );
							}
						}
						animate();
						defaultAction();
						// console.log('scene',scene);
					} );
	
					
					renderer.setPixelRatio( window.devicePixelRatio );
					renderer.setSize( window.innerWidth, window.innerHeight );
					renderer.outputEncoding = THREE.sRGBEncoding;
					renderer.shadowMap.enabled = true;
					container.appendChild( renderer.domElement );
					
					camera.position.set( 0 , 2, 3 );
					
					controls.enablePan = false;
					controls.enableZoom = true;
					// controls.enableZoom = false;
					controls.target.set( 0, 0.7, 0 );
					controls.update();
					window.addEventListener( 'resize', onWindowResize, false );
					window.__camera = camera;
					window.__controls = controls;
				}
				let selectedObject = null;
				function onDocumentMouseDown( event ) {
					// return;
					// console.log('iv',window.__iv.panel);
					
					x = event.layerX ||　event.clientX;
					y = event.layerX ||　event.clientY;
					if (event.touches && event.touches[0] && (event.touches.length == 1)) {
						x = event.touches[0].clientX;
						y = event.touches[0].clientY;
					}
					y = y - 41;
					// console.log('down',document.body.clientHeight,y)
					if (document.body.clientHeight - y < 140) {
						return
					}
					if (window.__iv.panel) {
						// console.log('clientHeight',document.body.clientHeight,y);
						if (document.body.clientHeight - y < 450) return;
					}
					const intersects = getIntersects( x,y );
					if ( selectedObject && (intersects.length > 0)) {
						// console.log('material',selectedObject.material)
						//selectedObject.material.opacity = defaultOpacity;
						selectedObject.material.color.set( dcolor );
						selectedObject = null;
					}
					
					if ( intersects.length > 0 ) {
						const res = intersects.filter( function ( res ) {
							return res && res.object;
		
						} )[ 0 ];
						if ( res && res.object && (res.object.name != 'plane')) {
							selectedObject = res.object;
							selectedObject.material.color.set( scolor );
							// selectedObject.material.opacity = 0.5;
							// console.log('pick object',selectedObject)
							window.BodyPicker.doPicked(selectedObject.name);
						}
					}
				}
				const raycaster = new THREE.Raycaster();
				const mouseVector = new THREE.Vector3();
				function getIntersects( x, y ) {
					x = ( x / window.innerWidth ) * 2 - 1;
					y = - ( y / window.innerHeight ) * 2 + 1;
					mouseVector.set( x, y, 0.5 );
					raycaster.setFromCamera( mouseVector, camera );
					//return raycaster.intersectObject( group, true ); // scene.children[3]
					return raycaster.intersectObject( scene, true );
				}
				
				// window.addEventListener( 'mousedown', onDocumentMouseDown, false );
				// window.addEventListener( 'mousemove', onDocumentMouseDown, false );
				window.addEventListener( 'touchstart', onDocumentMouseDown, false );
				function resetCamera () {
					__camera.position.set( - 1, 2, 3 );
					__controls.target.set( 0, 1, 0 );
					__controls.update();
				}
				function defaultAction () {
					const currentSettings = baseActions[ currentBaseAction ];
					const currentAction = currentSettings ? currentSettings.action : null;
					const action = null;
					prepareCrossFade( currentAction, action, 0.35 );
					// console.log('prepareCrossFade',currentAction,action)
				};
				window.resetCamera = resetCamera;
				function activateAction( action ) {
					const clip = action.getClip();
					const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
					setWeight( action, settings.weight );
					action.play();
				}
				function modifyTimeScale( speed ) {
					mixer.timeScale = speed;
				}
				function prepareCrossFade( startAction, endAction, duration ) {
				}
				function synchronizeCrossFade( startAction, endAction, duration ) {
				}
				function executeCrossFade( startAction, endAction, duration ) {
				}
				function setWeight( action, weight ) {
				}
				function onWindowResize() {
				}
				function animate() {
					if (__iv.run) requestAnimationFrame( animate );
					for ( let i = 0; i !== numAnimations; ++ i ) {
						const action = allActions[ i ];
						const clip = action.getClip();
						const settings = baseActions[ clip.name ] || additiveActions[ clip.name ];
						settings.weight = action.getEffectiveWeight();
					}
					const mixerUpdateDelta = clock.getDelta();
					mixer.update( mixerUpdateDelta );
					renderer.render( scene, camera );
				}
				__iv.run = true;
			},
			cancel(){
				let v = this;
			},
		}
	},
	{
		name: 'Status',
		template: `
		<div name="Status" class="wh100"  >
			<div name="start" class="bd1e">
				<div class="bb1e pdtb5 lh25 pd05">
					<div class=""><span>状态的开始时间</span></div>
				</div>
				<div class="pd05">
					<select class="w100 h30 bd1i hovbdci br2" v-model="value.start">
						<option v-for="(v,k) in start" :value="v.v" v-text="v.k"></option>
					</select>
				</div>
			</div>
			<div name="time" class="bd1e">
				<div class="bb1e pdtb5 lh25 pd05">
					<div class=""><span>状态的持续时间</span></div>
				</div>
				<div class="pd05">
					<select class="w100 h30 bd1i hovbdci br2" v-model="value.time">
						<option v-for="(v,k) in times" :value="v.v" v-text="v.k"></option>
					</select>
				</div>
			</div>
			<div name="mark" class="bd1e">
				<div class="bb1e pdtb5 lh25 pd05">
					<div class=""><span>其他补充说明</span></div>
				</div>
				<div class="ovy bgf5 lh25 bbx">
					<textarea class="wh100 bbx pd05 pdtb5 h70 lh20 bd1i br2" v-mode="value.mark" placeholder="补充"></textarea>
				</div>
			</div>
	  	</div>`,
	  	props:{
	  		value: { type: Object, default: {start:'',time:'',use:'',mark:'',k:''}},
	  	},
		data: function () {
			return {
				start:[
					{k:'一天以内',v:1},
					{k:'一周以内',v:2},
					{k:'一月以内',v:3},
					{k:'超过一月',v:4},
				],
				times:[
					{k:'一天以内',v:1},
					{k:'一周以内',v:2},
					{k:'一月以内',v:3},
					{k:'超过一月',v:4},
				],
			}
		},
		created () {
			let v = this;
			// console.log('created',v.value)
		},
		mounted () {let v = this;},
		methods:{
			selectStart(i,k) {
				let v = this;
				v.value.start = i.v;
				v.$emit('input',v.value);
			},
			selectTime(i,k) {
				let v = this;
				v.value.time = i.v;
				v.$emit('input',v.value);
			}
		}
	},
	//UserInfo
	{
		name: 'UserInfo',
		template: `
		<div name="UserInfo" class="wh100 bbx "  >
			<div name="base-info" class="">
				<div class="flec pdtb10 bb1e">
					<div class="w50"><span>姓名</span></div>
					<div class="flex1"><span v-text="info.name">姓名</span></div>
					<div class="w50"><span>年龄</span></div>
					<div class="flex1"><span v-text="info.age">年龄</span></div>
				</div>
				<div class="flec pdtb10">
					<div class="w50"><span>性别</span></div>
					<div class="flex1"><span v-text="info.gender">性别</span></div>
					<div class="w50"><span>体重</span></div>
					<div class="flex1"><span v-text="info.weight">体重</span><span>KG</span></div>
				</div>
			</div>
	  	</div>`,
	  	props:{
	  		value: { type: Object, default: {start:'',time:'',use:'',mark:'',k:''}},
	  	},
		data: function () {
			return {
				info:{
					name: '大王',
					age: '30',
					ymd: '',
					gender: '男',
					weight: '60',
				}
			}
		},
		created () {
			let v = this;
			v.getUserInfo();
		},
		mounted () {let v = this;},
		methods:{
			getUserInfo(){
				let v = this;
				let dt = {
					btoken: __gls('btoken'),
					user_id: __gls('user_id'),
					username: __gls('username'),
				}
				__post({url:__api.useri,data:dt,method:'GET'}).then(r => {
					let l = r.data;
				}).catch(e =>{ console.log(e);})
			}
		}
	},
	{
		name: 'UserStatus',
		template: `
		<div name="UserInfo" class="wh100 bbx "  >
			<div name="base-status-info" class="">
				<div class="flec pdtb10 bb1e">
					<div class="w30 marr10 justify-all"><span>姓名</span></div>
					<div class="flex1 pd05"><span v-text="info.username">姓名</span></div>
					<div class="w30 marr10 justify-all"><span>I &nbsp;D</span></div>
					<div class="flex1 pd05"><span v-text="info.user_id">******</span></div>
				</div>
				<div class="flec pdtb10 bb1e">
					<div class="w30 marr10 justify-all"><span>血压</span></div>
					<div class="flex1 pd05"><span v-text="info.blood_pressure">******</span></div>
					<div class="w30 marr10 justify-all"><span>血糖</span></div>
					<div class="flex1 pd05"><span v-text="info.blood_sugar">******</span></div>
				</div>
			</div>
	  	</div>`,
	  	props:{
	  		value: { type: Object, default: {start:'',time:'',use:'',mark:'',k:''}},
	  	},
		data: function () {
			return {
				info:{
					user_id:  '******',
					username: '******',
					blood_pressure:   '******',
					blood_sugar:   '******',
				}
			}
		},
		created () {
			let v = this;
			v.getUserInfo();
		},
		mounted () {let v = this;},
		methods:{
			getUserInfo(){
				console.log('getUserInfo');
				let v = this;
				let dt = {
					btoken: __gls('btoken'),
					user_id: __gls('user_id'),
					username: __gls('username'),
				}
				__post({url:__api.useri,data:dt,method:'GET'}).then(r => {
					if (r.code == 200) {
						let l = r.data;
						v.info = l;
					} else {
						__message(r.msg,5000,'cr');
					}
					
				}).catch(e =>{ console.log(e);})
			}
		}
	},
]

if (!window.widgets) window.widgets = [];
for (let n in __ws) window.widgets.push(__ws[n]);